<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/5/12
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>部门管理</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="部门名称:">
                        <i-input type="text" v-model="orgVo.orgName"/>
                    </form-item>
                    <form-item label="部门电话:">
                        <i-input type="text" v-model="orgVo.orgTele" />
                    </form-item>


                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <i-button type="success" @click="toAdd">添加部门</i-button>
    </card>
<i-table :columns="columns" :data="pageResult.rows" border stripe :height="300">

    <template slot-scope="{row,index}"  slot="action">
            <i-button type="warning" @click="toUpdate(row)" size="small">修 改</i-button>
            <i-button type="error" @click="del(row,index)" size="small">删 除</i-button><!--row代表此行数据-->
    </template>
</i-table>
    <modal v-model="addFlag" title="添加部门" @on-ok="add">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="部门名称">
                <i-input v-model="org.orgName" size="large"/>
            </form-item>
            <form-item label="部门电话号码">
                <i-input v-model="org.orgTele" size="large"/>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="updateFlag" title="修改部门" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="部门名称">
                <i-input v-model="org.orgName" size="large"/>
            </form-item>
            <form-item label="部门电话号码">
                <i-input v-model="org.orgTele" size="large"/>
            </form-item>

        </i-form>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
    <%--:current.sync="pageNo"    =pageNo=arguments[0];searchUserList();当前页码，支持.sync修饰符,同步
    @on-change="searchUserList"返回改变后的页码,这两行代码相当于下面一行代码--%>
          @on-change="pageNo=arguments[0];search();"
    <%-- @on-change="searchUserList"--%>
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>

<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {
                    title:"部门编号",key:"id"
                },
                {
                    title:"部门名称",key:"orgName"
                },
                {
                    title:"部门电话",key:"orgTele"
                },
                {
                    title:"操作",slot:"action"
                }],

            org:{  },
            orgVo:{},
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            addFlag:false,
            updateFlag:false

        },
        methods:{
            search(){
                axios.get(`${ctx}/cus/org/list/${this.pageNo}/${this.pageSize}`,{params:this.orgVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            toAdd(){
                this.org = {};
                this.addFlag=true;

            },
            add(){
                axios.post(`${ctx}/cus/org/add`,this.org)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();

                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/cus/org/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.search();
                            });
                    }
                });
            },
            toUpdate(row){
                Object.assign(this.org,row);
                console.log(  Object.assign(this.org,row))
                this.updateFlag=true;
            },
            update(){
                axios.post(`${ctx}/cus/org/update`,this.org)
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });

            },

        },
        mounted(){
            this.search();
        },


        });
</script>
</body>
</html>
